<template>
  <div>
    <myDivider name="人口信息管理"></myDivider>
    <div>
      <el-input class="findValue" v-model="query.name" placeholder="姓名" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-input class="findValue" v-model="query.phoneNumber" placeholder="手机号" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-select class="findValue" v-model="query.residentialId" clearable @change="SouSuo" placeholder="小区筛选">
        <el-option v-for="item, i in residentialData" :key="i" :label="item.name" :value="item.residentialId">
        </el-option>
      </el-select>
      <el-select class="findValue" v-model="query.specialCode" clearable @change="SouSuo" placeholder="身份标识筛选">
        <el-option v-for="item, i in specialCodeData" :key="i" :label="item.name" :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
        @click="SouSuo">搜索</el-button>
      <el-button style="margin-top: 20px; margin-left: 15px" @click="reset">重置</el-button>

      <div class="operation">
        <el-button type="primary" @click="ToBatchImport">批量导入</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openForm">新增</el-button>
      </div>
    </div>

    <div>
      <el-table :data="userData" style="width: 100%" class="menuTable" row-key="uid"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">


        <el-table-column align="center" prop="name" label="姓名" width="150">
        </el-table-column>
        <el-table-column align="center" prop="phoneNumber" label="手机号" width="150">
        </el-table-column>

        <el-table-column align="center" prop="bindingUserAccount" label="绑定账号" width="150">
        </el-table-column>


        <el-table-column align="center" prop="gender" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.gender == '0' ? '女' : "男" }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="birthday" label="出生日期" width="120">
          <template slot-scope="scope">
            {{ timeFormat(scope.row.birthday) }}
          </template>
        </el-table-column>

        <el-table-column align="center" prop="maritalStatusValue" label="婚否">
        </el-table-column>

        <el-table-column align="center" prop="specialNames" label="身份标识" width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.specialNames" placement="top-start">
              <span>{{ scope.row.specialNames == null ? '—' : scope.row.specialNames.length > 8 ?
                "..." + scope.row.specialNames.substring(scope.row.specialNames.length - 8,
                  scope.row.specialNames.length) : scope.row.specialNames }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="residentialNames" label="所属小区" width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.residentialNames" placement="top-start">
              <span>{{ scope.row.residentialNames == null ? '—' : scope.row.residentialNames.length > 8 ?
                "..." + scope.row.residentialNames.substring(scope.row.residentialNames.length - 8,
                  scope.row.residentialNames.length) : scope.row.residentialNames }}</span>
            </el-tooltip>
          </template>
        </el-table-column>


        <el-table-column align="center" prop="homeAddress" label="家庭住址" width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.homeAddress" placement="top-start">
              <span>{{ scope.row.homeAddress == null ? '—' : scope.row.homeAddress.length > 8 ?
                "..." + scope.row.homeAddress.substring(scope.row.homeAddress.length - 8,
                  scope.row.homeAddress.length) : scope.row.homeAddress }}</span>
            </el-tooltip>
          </template>
        </el-table-column>


        <el-table-column align="center" prop="educationLevelValue" label="文化程度">
        </el-table-column>


        <el-table-column align="center" prop="occupationName" label="职业" width="160">
        </el-table-column>

        <el-table-column align="center" prop="company" label="工作单位" width="160">
        </el-table-column>

        <el-table-column align="center" prop="notes" label="备注" width="160">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.notes" placement="top-start">
              <span>{{ scope.row.notes == null ? '—' : scope.row.notes.length > 8 ?
                "..." + scope.row.notes.substring(scope.row.notes.length - 8,
                  scope.row.notes.length) : scope.row.notes }}</span>
            </el-tooltip>
          </template>
        </el-table-column>



        <el-table-column label="操作" width="140px" align="center" fixed="right">
          <template slot-scope="scope">
       
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="echoValueForUpdate(scope.row)">编辑</span>
                </el-col>
                <el-col class="el" :span="8">
              
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="detailClick(scope.row)">详情</span>
                </el-col>
                <el-col class="el" :span="8" v-if="logOnUser.unitType=='system'">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="deletePopulationById(scope.row)">删除</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>

    </div>


    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- <div class="pageFooterFather">
      <el-pagination v-if="total > pageSize" background layout="prev, pager, next" :total="total"
        @current-change="handleCurrentChange" class="pageFooter">
      </el-pagination>
    </div> -->
  </div>
</template>
<script>
import axios from "axios";
import {
  getPopulationList,
  deletePopulationInformation,

} from "./population";
import { timeYMD } from "@/utils/utils.js";
export default {
  data() {
    return {

      specialCodeData: [],
      residentialData: [],
      userData: [], //用户数据
      depmentManageData: [],
      allRoleListData: [],
      query: {
        //左上角查询input
        userCode: "",
        userName: "",
      },
      insertForm: {
        // 新增弹框参数
        account: "",
        userName: "",
        status: "1",
        insertType: 0,

      },
      insertRules: {
        userName: [
          {
            required: true,
            message: "用户名称不能为空",
            trigger: "blur",
          },
        ],
        account: [
          {
            required: true,
            message: "用户账号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "用户密码不能为空",
            trigger: "blur",
          },
        ],
      },
      dialogFormVisible: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      pageNum: 1,
      pageSize: 10,
      total: 0,
      props: {
        label: 'name',
        children: 'children',
        multiple: true
      },
      logOnUser:{},
    };
  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.getSpecialCodeArray()
    this.getResidentialData()
    this.$set(this.query, 'name', '')
    this.$set(this.query, 'phoneNumber', '')
    //刚进入页面加载
    this.getPopulationList();


  },
  methods: {
  
    ToBatchImport() {
      this.$router.push('/batchImport?name=人口信息导入')
    },
    async getResidentialData() {
      let res = await this.$api.patrol.myPatrolGetCommunityList('')
      if (res.code == 200) {
        this.residentialData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async getSpecialCodeArray() {
      let res = await this.$api.customer.myDictionaryQueryList('special_code')
      if (res.code == 200) {
        this.specialCodeData = res.data
      } else {
        this.$message.error(res.message)
      }
    },

    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.getPopulationList()
    },
    PageChange(e) {
      this.pageNum = e
      this.getPopulationList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getPopulationList()
    },
    reset() {
      this.$set(this.query, 'name', '')
      this.$set(this.query, 'phoneNumber', '')
      this.$set(this.query, 'specialCode', '')
      this.$set(this.query, 'residentialId', '')
      this.pageNum = 1
      this.getPopulationList()
    },
    //按条件查询菜单列表
    getPopulationList() {

      getPopulationList(
        {
          name: this.query.name,
          phoneNumber: this.query.phoneNumber,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          specialCode: this.query.specialCode ? this.query.specialCode : '',
          residentialId: this.query.residentialId ? this.query.residentialId : 0
        }
      ).then((res) => {
        if (res.code == 200) {
          this.userData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.message)
        }

      });
    },


    //弹出弹框并加载父级菜单
    openForm() {
      this.$router.push({ path: '/population/populationInsert' });

    },


    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.queryUserList();
    },
    forceChange() {
      this.$forceUpdate()
    },



    deletePopulationById(row) {
      this.$confirm("确认删除该人口信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var id = row.id;
        deletePopulationInformation(id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.$nextTick(() => {
              this.getPopulationList();
            })
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });
    },

    resetField() {
      this.insertForm.id = 0;
      this.dialogFormVisible = true;
      this.insertForm.userName = "";
      this.insertForm.gender = "0";
      this.insertForm.mobile = "";
      this.insertForm.email = "";
      this.insertForm.depId = "";
      this.insertForm.roleIds = [];
    },


    timeFormat(time) {
      return timeYMD(time);
    },
    detailClick(row) {
      this.$router.push(`/population/detail?id=${row.id}`)
    },
    echoValueForUpdate(row) {
      var id = row.id;
      this.$router.push({ path: '/population/populationInsert', query: { id: id, operateType: 'update' } })
    },


    //打开账号绑定窗口 并回显账号信息
    // openBindingForm(row) {
    //   var id = row.id;
    //   this.$router.push({ path: '/population/populationBinding', query: { id: id, operateType: 'update' } });
    // },


  },
};
</script>
<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {


      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;

}

.formItemStyle {
  margin-bottom: 22px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>